import TextEditor from '@/pages/cues/components/TextEditor';
import { saveMasses } from '@/services/api/api-masses';
import { CheckCircleTwoTone, FileSearchOutlined, PlusOutlined, SendOutlined } from '@ant-design/icons';
import { ModalForm, ProCard, ProFormCascader, ProFormRadio, ProList } from '@ant-design/pro-components';
import ProForm, {
    DrawerForm,
    ProFormInstance,
    ProFormSelect,
    ProFormText,
    ProFormTextArea,
} from '@ant-design/pro-form';
import { ActionType } from '@ant-design/pro-table';
import { Button, Card, Cascader, Form, message, Modal } from 'antd';
import Meta from 'antd/es/card/Meta';
import FormItem from 'antd/es/form/FormItem';
import 'dayjs/locale/zh-cn';
import React, { useRef, useState } from 'react';
import { useAccess } from 'umi';
import UploadDragger from './UploadDragger';
interface AddMassesProps {
    onRefurbish: () => void;
    triggerMode: 'card' | 'button';
}

const AddMasses: React.FC<AddMassesProps> = ({ onRefurbish, triggerMode }) => {
    const access = useAccess();

    const actionRef = useRef<ActionType>();

    const formRef = useRef<ProFormInstance>();


    const [openAddActive, setOpenAddActive] = useState<boolean>();


    const [modalFormOpen, setModalFormOpenState] = useState<boolean>(false);


    return (
        <>
            <DrawerForm
                key="drawer_form_add_submit"
                title="我要爆料"
                drawerProps={{
                    destroyOnClose: true,
                    width: 1150,
                }}
                formRef={formRef}
                trigger={
                    triggerMode === 'card' ? (
                        <Card
                            hoverable
                            bordered={false}
                            style={{ backgroundColor: '#91caff' }}
                        // cover={<img alt="example" src={cuesImage} />}
                        >
                            <Meta title="我要爆料" />
                        </Card>
                    ) : (
                        <Button type="primary" icon={<PlusOutlined />}>我要爆料</Button>
                    )
                }
                initialValues={{}}
                open={openAddActive}
                onOpenChange={(visible) => {
                    setOpenAddActive(visible);
                    if (visible) {
                    } else {
                    }
                }}
                layout="horizontal"
                submitter={{
                    render: (props, defaultDoms) => {
                        return [
                            <Button onClick={() => setOpenAddActive(false)}>取消</Button>,
                            <Button
                                key="button_add_submit"
                                icon={<SendOutlined />}
                                type="primary"
                                style={{
                                    background: '#87d068',
                                }}
                                onClick={() => {
                                    /**
                                     * ======================
                                     * 直接发布
                                     * ======================
                                     */
                                    const values = formRef.current?.getFieldsValue();

                                    if (!(values.title !== undefined && values.title.length > 0)) {
                                        message.warning('请输入标题');
                                        return;
                                    }

                                    if (!(values.content !== undefined && values.content.length > 0)) {
                                        message.warning('请输入爆料内容');
                                        return;
                                    }

                                    setModalFormOpenState(true);
                                }}
                            >
                                提交
                            </Button>,
                            <ModalForm
                                key={'modal_form_add_submit'}
                                title={
                                    <>
                                        <CheckCircleTwoTone
                                            style={{
                                                marginRight: 8,
                                            }}
                                            twoToneColor="#87d068"
                                        />
                                        确认提交
                                    </>
                                }
                                autoFocusFirstInput
                                modalProps={{
                                    width: 400,
                                    destroyOnClose: true,
                                }}
                                open={modalFormOpen}
                                onOpenChange={setModalFormOpenState}
                                submitTimeout={2000}
                                submitter={{
                                    submitButtonProps: {
                                        type: 'primary',
                                        style: { background: '#87d068' },
                                    },
                                }}
                                onFinish={async () => {
                                    const values = formRef.current?.getFieldsValue();

                                    if (
                                        values.articleAttachments !== undefined &&
                                        values.articleAttachments.length > 0
                                    ) {
                                        const articleAttachments = values.articleAttachments.map(
                                            (item: { response: { data: { id: any } } }) => {
                                                return item.response.data.id;
                                            },
                                        );

                                        values.attachmentIds = articleAttachments;
                                    }
                                    console.log(values);

                                    const response = await saveMasses({
                                      ...values,
                                      createdSource:1
                                    });

                                    if (response.code === 0) {
                                        message.success('提交成功');
                                        setOpenAddActive(false);
                                        onRefurbish();
                                        return true;
                                    } else {
                                        return false;
                                    }
                                }}
                            />,
                        ];
                    },
                }}
            >
                <ProFormText
                    width="xl"
                    name="title"
                    label='标题'
                    required={true}
                    fieldProps={{
                        allowClear: true,
                        maxLength: 200,
                        style: {
                            marginLeft: '28px',
                        },
                    }}
                />
                <ProCard ghost>
                    <ProCard ghost>
                        <ProForm.Item
                            name="content"
                            required={true}
                            label="爆料内容"
                        >
                            <TextEditor
                                onInit={(editor) => { }}
                                readonly={false}
                                onClick={(value) => { }}
                                defaultContent=""
                                tinyID="tinyId"
                            />
                        </ProForm.Item>
                    </ProCard>
                </ProCard>
                <ProFormRadio.Group
                    name="isConceal"
                    label="是否愿意提供联系方式"
                    initialValue={0}
                    required={true}
                    options={[
                        {
                            label: '是',
                            value: 1,
                        },
                        {
                            label: '否',
                            value: 0,
                        },
                    ]}
                />
                <FormItem
                    name="articleAttachments"
                    label={
                        <span
                            style={{
                                marginLeft: 11,
                            }}
                        >
                            附件
                        </span>
                    }
                >
                    <UploadDragger
                        style={{
                            marginLeft: '28px',
                        }}
                        onPreview={(file) => { }}
                        access={{
                            isPicture: access.主动报送x报送线索x附件x图片,
                            isVideo: access.主动报送x报送线索x附件x视频,
                            isOffice: access.主动报送x报送线索x附件x办公,
                            isOther: access.主动报送x报送线索x附件x其他,
                        }}
                        url="/cues/attachment/save"
                        mode="active"
                    />
                </FormItem>
            </DrawerForm>
        </>
    );
};
export default AddMasses;
